<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from "zrender";
export default {
  data() {
    return {
      config: {
        barGap: 60,
        barWidth: 50,
        delay: 200,
      },
      chartData: [100, 280, 50, 150, 180],
    };
  },
  mounted() {
    this.zr = zrender.init(document.getElementById("main"));
    this.drawBars();
    
    this.playBars();
    setTimeout(() => {
        this.hideBars();
    }, 2000);
  },
  methods: {
    // 绘制柱子
    drawBars() {
      this.barGroup = new zrender.Group();
      this.barGroup.name = "bars";
      let y = this.config.barGap;
      this.chartData.forEach((d) => {
        let bar = new zrender.Rect({
          shape: {
            x: 0,
            y,
            r: [0, 8, 8, 0],
            height: this.config.barWidth,
            width: 0,
          },
          style: {
              stroke: '#ccc',
            fill: new zrender.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: "#06B5D7" },
              { offset: 0.5, color: "#44C0C1" },
              { offset: 1, color: "#71C8B1" },
            ]),
          },
        });
        // 保留数据，用于后续的动画
        bar._data = d;
        this.barGroup.add(bar);
        y += this.config.barGap + this.config.barWidth;
      });
      this.zr.add(this.barGroup);
    },
    // 播放柱子动画
    playBars(){
        let delay = 0;
        this.barGroup.eachChild(bar=>{
          bar.animate('shape', false)
            .when(500, {width: bar._data})
            .delay(delay)
            .start('elasticOut')
            delay += this.config.delay
        })
    },
    // 隐藏柱子
    hideBars(){
        this.barGroup.eachChild(bar=>{
            bar.animate('style')
            .when(300, {opacity: 0})
            .start()
            bar.animate('shape')
            .when(300, {width: 0})
            .start()
        })
    }
  },
};
</script>

<style scoped>
#main {
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
